<template>
   <div class="app-container h-100">
     <el-container class="h-100">
         <el-aside width="300px" style="background: #FFFFFF;">
            <leftTree :leftlabel="'行政区划'" :isDefault="'1'" :showCheckbox="false" :rightlabe="'河流'" isTreeData :defaultProps="treeDefaultProps" :apiConfig="treeApiConfig"  @tree-check-change="treeCheckChange"></leftTree>
         </el-aside>
         <el-container class="h-100">
            <el-header>
                <el-form ref="form" :inline="true" label-min-width="80px"size="small">
                    <el-form-item label="时间范围：">
                        <el-date-picker
                            v-model="queryParams.dateRange"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            unlink-panels
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item v-show="dataType == '图表'" label="监测项目">
                        <el-select v-model="queryParams.pollutentCode" clearable placeholder="请选择监测项目">
                            <el-option v-for="item in pollutantList" :key="item.pollutantcode" :label="item.pollutantname" :value="item.pollutantcode">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-radio-group v-model="dataType" @input="tabRuttonChange()">
                            <el-radio-button label="列表"></el-radio-button>
                            <el-radio-button label="图表"></el-radio-button>
                        </el-radio-group>
                        <el-button class="ml-5" type="primary" @click="handleQuery">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main class="h-100">
                <el-table v-if="dataType == '列表'" :data="tableListData.tableData || []" style="width: 100%">
                    <el-table-column v-for="(keyStr,i) in tableListData.tableKeys" :prop="keyStr" :label="tableListData.tableNames[i]" :width="i<=3?'150px':''">
                    </el-table-column>
                </el-table>
                <div v-else class="h-100">
                    <div id="chart" class="h-100" ref="chartRef"></div>
                </div>
            </el-main>
         </el-container>
     </el-container>
   </div>
</template>
<script>
    import leftTree from '@/components/viewComponents/leftTree/leftTree.vue';
    import {dataSourcePolluteTree,buspollutantList,dataAnalysis,dataAnalysisChart} from './api';
    import * as echarts from "echarts";
    export default {
        name: "companyComparisonAnalysis",
        components: {
            leftTree
        },
        data(){
            return {
                treeDefaultProps:{
                    children: 'children',
                    label: 'name'
                },
                treeApiConfig: [
                    {
                        apiFn: dataSourcePolluteTree,
                        apiParams: {type:'county'},
                    },
                    {
                        apiFn: dataSourcePolluteTree,
                        apiParams: {type:'river'},
                    },
                ],
                dataType:'列表',
                pollutantList:[],
                selectTreeId:'',
                queryParams:{
                    dateRange:[],
                    pollutentCode:'',
                },
                tableListData:{},
                echartInit:null,

            }
        },
        created() {
            this.getbuspollutantList();
            let beginTime = $moment().offset('day',-7).format(`{yyyy}-{mm}-{dd}`);
            let endTime = $moment().format(`{yyyy}-{mm}-{dd}`);
            this.queryParams.dateRange = [beginTime,endTime];
        },
        methods: {
            async getbuspollutantList(){
                let res = await buspollutantList();   
                if(res.code == 200){ 
                    this.pollutantList = res.rows;
                    // 如果监测项目列表不为空，默认选中第一项
                    if(this.pollutantList && this.pollutantList.length > 0){
                        this.queryParams.pollutentCode = this.pollutantList[0].pollutantcode;
                    }
                }
            },
            handleQuery(){
                this.getlist();
            },
            async getTableList(){
                let apiPArams = {
                    id:this.selectTreeId,
                    beginTime:this.queryParams.dateRange[0],
                    endTime:this.queryParams.dateRange[1],
                }
                let res = await dataAnalysis(apiPArams);
                let names = ['监测类型','排口名称','监测时间']
                let keys = ['monitorTypeCode','outPortName','samplingTime']
                const headdata = res.data.headdata || {};
                let tableNames  = [...names,...Object.values(headdata)];
                let tableKeys  = [...keys,...Object.keys(headdata)];
                let tableData = res.data.resdata;
                this.tableListData = {tableNames,tableKeys,tableData}

            },
            async getChartData(){
                let apiPArams = {
                    id:this.selectTreeId,
                    beginTime:this.queryParams.dateRange[0],
                    endTime:this.queryParams.dateRange[1],
                    pollutentCode:this.queryParams.pollutentCode,
                }
                let res = await dataAnalysisChart(apiPArams);
                let legend_name = [];
                let series = [];
                for(let item of res.data.vadata){
                    legend_name.push(`${item.dataType}-${item.portName}`);
                    let valueArr = item.dataval.map(it =>{
                        if(it== '-'){
                            return '0'
                        }
                        return it;
                    })
                    series.push({
                        name: `${item.dataType}-${item.portName}`,
                        type: "line",
                        data: valueArr
                    });
                }
                let options = {
                    legend: {
                        data: legend_name,
                        type: "scroll",
                        textStyle: { fontSize: 12 },
                    },
                    tooltip: {},
                    grid: {
                        left: "15%",
                        right: "15%",
                        bottom: "10%",
                        top: "15%",
                        containLabel: true,
                    },
                    xAxis: {
                        type: 'category',
                        data: res.data.ydata,
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: series,
                };
                if(!this.echartInit){
                    this.echartInit = echarts.init(this.$refs.chartRef);
                }
                this.echartInit.setOption(options,true);

            },
            async getlist(){
                if(this.dataType == '列表'){
                   await this.getTableList();
                }else{
                    await this.getChartData();
                }
            },
            tabRuttonChange(val) {
                this.echartInit = null;
                this.getlist();
            },
            treeCheckChange(nodes) {
                for(let node of nodes){
                    if(!node.children || node.children.length == 0){
                        this.selectTreeId = node.id;
                    }
                }
                this.getlist();                
            }
        }
    }
</script>